<script setup>
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { ref } from 'vue'
import { useElementBounding } from '@vueuse/core'
import { showConfirmDialog, showDialog } from "vant";

import { queryPreregisterMessage } from '@/api/Base/preregister';
import { recordRepairResultsAndNotes } from '@/api/Base/fix';
const toolbar = ref(null)
const position = useElementBounding(toolbar)

definePage({
    name: 'fixnote',
    meta: {
        level: 2,
        title: '维修笔记',
    },
})

const router = useRouter()
const route = useRoute()
const fixnoteObj = reactive({
    item: {},
    note: "",
    filelist:[],
    reload: () => {
        loading.value = true
        queryPreregisterMessage({
            "preNumber": route.query.id
        }).then(res => {
            fixnoteObj.item = res.data
            loading.value = false
        })
    }
})

onMounted(() => {
    fixnoteObj.reload()
})

// 修改操作处理方法
const handleAction = (state) => {
    const messages = {
        6: { title: '外修确认', message: '外修确认会更改此任务正式状态,确定要将设备转为外修吗？' },
        0: { title: '完成确认', message: '完成确认会更改此任务正式状态,确定要标记为维修完成吗？' },
        1: { title: '无法维修', message: '无法维修会更改此任务正式状态,确定标记为无法维修吗？' }
    };
    showConfirmDialog({
        title: messages[state].title,
        message: messages[state].message,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        changeState(state);
    }).catch(() => {
        // 取消操作
    });
};

function getStatusByValue(value) {
    // 使用switch语句来匹配值并返回相应的标签
    switch (value) {
        case 1:
            return '待维修';
        case 2:
            return '维修中';
        case 3:
            return '维修完成';
        case 4:
            return '无法修复';
        case 5:
            return '暂停';
        case 6:
            return '需外修';
        case 7:
            return '外修中';
        case 8:
            return '已取消';
        case 8:
            return '借用参考';
        default:
            return '未知'; // 或者根据需要返回其他默认值
    }
}

function getBusinessTypeByValue(value) {
    // 使用switch语句来匹配值并返回相应的标签
    switch (value) {
        case 1:
            return '正常';
        case 2:
            return '保修';
        case 3:
            return '走账';
        default:
            return '未知'; // 或者根据需要返回其他默认值
    }
}

// 修改状态变更方法
function changeState(state) {
    recordRepairResultsAndNotes({
        "result": state,  // 根据实际接口需要调整（可能需要传状态码或状态名称）
        "repairId": fixnoteObj.item.lastRepairRecord.repairId,
        "fileListFileId": []
    }).then(() => {
        // 操作成功处理
        fixnoteObj.reload();
        showNotify({ type: 'success', message: '操作成功' }); // 如果需要提示
    }).catch(error => {
        showNotify({ type: 'danger', message: '操作失败' });  // 错误处理
    });
}

function SaveNote() {
    showConfirmDialog({
        title: "确定保存笔记吗?",
        // message: messages[state].message,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        recordRepairResultsAndNotes({
            "result": 3,  // 根据实际接口需要调整（可能需要传状态码或状态名称）
            "repairId": fixnoteObj.item.lastRepairRecord.repairId,
            "postRepairStatus": fixnoteObj.note,
            "fileListFileId": fixnoteObj.filelist
        }).then(() => {
            // 操作成功处理
            fixnoteObj.reload();
            showNotify({ type: 'success', message: '操作成功' }); // 如果需要提示
            router.replace("/fix")
        }).catch(error => {
            showNotify({ type: 'danger', message: '操作失败' });  // 错误处理
        });
    }).catch(() => {
        // 取消操作
    });

}
const loading = ref(true)
</script>

<template>
    <div class="p-10 mt-[43px] bg-white  w-100%">
        <div v-if="!loading" class="h-70vh">
            <div class="bg-white relative gap-5 rounded-[10px] w-[100%] min-h-100 flex flex-col items-center p-10">
                <div name="顶栏" class="w-[100%] flex justify-between">
                    <div class="flex flex-row justify-center items-center" name="客户">
                        {{ fixnoteObj.item.company.sName }}-{{
                            fixnoteObj.item.customer.sNameCn ? fixnoteObj.item.customer.sNameCn :
                                fixnoteObj.item.customer.sNameEn
                        }}
                    </div>
                    <div name="状态">
                        <h1 class="leading-none m-0 text-[12px] font-bold color-[#E7845B]">
                            {{ getStatusByValue(fixnoteObj.item.lastRepairRecord.status) }}</h1>
                    </div>
                </div>
                <div class="flex flex-row w-100% gap-10">
                    <EImage :width="'80px'" :height="'80px'"
                        :photo-url="fixnoteObj.item.sPhotoUrl == '' ? '[]' : fixnoteObj.item.sPhotoUrl" />
                    <div class="text-12">
                        <h1 class="m-0 text-14">{{ fixnoteObj.item.sPreregisterNo }}</h1>
                        <h1 class="m-0 text-10 text-[#323131] font-500">
                            {{ fixnoteObj.item.lastRepairRecord.brand }}-{{ fixnoteObj.item.lastRepairRecord.deviceName
                            }}
                        </h1>
                        <h1 class="m-0 text-10 text-[#323131] font-500">
                            {{ JSON.parse(fixnoteObj.item.lastRepairRecord.serialList)[0] }}</h1>

                        <VanTag v-if="fixnoteObj.item.lastRepairRecord.businessType == 2" type="success">
                            {{ getBusinessTypeByValue(fixnoteObj.item.lastRepairRecord.businessType) }}
                        </VanTag>
                        <VanTag v-if="fixnoteObj.item.lastRepairRecord.businessType == 1" type="primary">
                            {{ getBusinessTypeByValue(fixnoteObj.item.lastRepairRecord.businessType) }}
                        </VanTag>
                        <VanTag v-if="fixnoteObj.item.lastRepairRecord.businessType == 3" type="warning">
                            {{ getBusinessTypeByValue(fixnoteObj.item.lastRepairRecord.businessType) }}
                        </VanTag>

                    </div>
                </div>
                <p class=" bg-[#FAFAFA] m-0 p-5 w-100% ">
                    <a class="text-12px font-bold">故障状态:</a>
                    <a class="text-12px">{{ fixnoteObj.item.lastRepairRecord.remarks }}</a>
                </p>
                <div class="flex flex-row gap-10">
                  
                    <VanButton @click="handleAction(6)" v-if="fixnoteObj.item.lastRepairRecord.status == 2"
                        class="w-[80px]" round size="small">外修</VanButton>
                    <VanButton @click="handleAction(1)" v-if="fixnoteObj.item.lastRepairRecord.status == 2"
                        class="w-[80px]" round size="small">无法维修</VanButton>
                    <VanButton @click="handleAction(0)" v-if="fixnoteObj.item.lastRepairRecord.status == 2"
                        class="w-[80px]" round size="small">完成</VanButton>
                </div>
            </div>
            <div class="w-100% h-[300px] overflow-auto bg-[#FAFAFA]" name="维修记录">
                <h1 class="text-14 font-400 m-10px">维修笔记</h1>
                <MdEditor style="border-width: 0px; background-color: #FAFAFA;"
                    class="w-100% border-0 shadow-none bg-[#FAFAFA] p-0" :class="fixnoteObj.toolbar ? 'edit' : 'look'"
                    :footers="[]" :toolbars="[]" :preview="false" v-model="fixnoteObj.note" />
            </div>
            <div class="w-100% bg-[#FAFAFA]">
                <h1 class="text-14 font-400 m-10px">文件上传</h1>
                <EImageList v-model:photoList="fixnoteObj.filelist" />
            </div>
        </div>
        <van-loading v-if="loading" vertical>
            <template #icon>
                <van-icon name="star-o" size="30" />
            </template>
            加载中...
        </van-loading>
        <StepBottom v-show="!fixnoteObj.toolbar" v-model="inputData">
            <template #default>
                <div>
                    <span class="step-bottom-h2" @click="() => {
                        // input.value.step+=1
                        console.log(inputData.value--);
                        console.log(inputData.value);

                    }">返回上一步</span>
                </div>

                <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="SaveNote">保存笔记</el-button>
            </template>
        </StepBottom>
    </div>
</template>

<style lang="less" scoped>
.edit {
    height: 380px;
}

.look {
    height: 500px;
}
</style>
